import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Descriptions, Divider } from 'antd';
import React from 'react';
// import { useState, useCallback, useRef, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import { queryDdetails } from '../service';
import Zmage from 'react-zmage'
import router from 'umi/router'
import {API_URL} from '@/config/api'
const ListofDetails = props => {
  const { modalVisible, onCancel,accidentId} = props;
  const renderContent = (i) => {
    if (i === '1') {
      return [
        <>
        {/* 破损行李详情 */}
          <Descriptions title={<span >破损行李事故详情</span>} column={2}>
            <Descriptions.Item label="行李编号">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.pkgNo}</Descriptions.Item>
            {/* <Descriptions.Item label="事故类型">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.accidentType}</Descriptions.Item> */}
            <Descriptions.Item label="事故类型">破损行李</Descriptions.Item>
            <Descriptions.Item label="行李航线">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.pkgSegment}</Descriptions.Item>
            <Descriptions.Item label="行李类型">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.pkgType}</Descriptions.Item>
            <Descriptions.Item label="逾重行李票号">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.overWeightTktNo}</Descriptions.Item>
            <Descriptions.Item label="破损类型">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.damageType}</Descriptions.Item>
            <Descriptions.Item label="备注说明">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.remark}</Descriptions.Item>
            <br></br>
            <Descriptions.Item label="照片附件" span={4}>
            {
               detailsdata.pkgInfoDetailInfo.imgUrl&&detailsdata.pkgInfoDetailInfo.imgUrl!==null?
               <div style={{display: 'flex',
                   justifyContent: 'flex-start',
                   alignItems: 'center',
                   flexWrap: 'wrap'}}
                   >{
                  detailsdata.pkgInfoDetailInfo.imgUrl.split(',').map(function(item,index,arr){
                    let imgurl=`${API_URL}/api/uploadAndDownload/showImg?imgUrl=${item}`
                    // let imgurl='http://172.16.1.206:81/api/uploadAndDownload/showImg?imgUrl=' + item
                  //  return  <img src={imgurl} alt="" style={{display: 'block',width:'140px',height:'140px',margin:'5px'}}/>
                   return <div style={{display: 'block',width:'140px',height:'140px',margin:'5px'}}><Zmage src={imgurl} style={{display: 'block',width:'100%',height:'100%'}}/></div>
                   })
                 }</div>
                :'-'
            }
            </Descriptions.Item>
          </Descriptions>
          <Divider />
        </>
      ]
    }
    if (i=== '2') {
      return [
        <>
          <Descriptions title={<span >少收行李事故详情</span>} column={2}>
             <Descriptions.Item label="行李编号">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.pkgNo}</Descriptions.Item>
             {/* <Descriptions.Item label="事故类型">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.accidentType}</Descriptions.Item> */}
             <Descriptions.Item label="事故类型">少收行李</Descriptions.Item>
             <Descriptions.Item label="行李航班">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.pkgFlightNo}</Descriptions.Item>
             <Descriptions.Item label="行李类型">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.pkgType}</Descriptions.Item>
            <Descriptions.Item label="航程及经停站">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.segment}</Descriptions.Item>
            <Descriptions.Item label="逾重行李票号">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.overWeightTktNo}</Descriptions.Item>
            <Descriptions.Item label="丢失重量">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.littlePkgWeight}</Descriptions.Item>
            <Descriptions.Item label="少收类型">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.littlePkgType}</Descriptions.Item>
            <Descriptions.Item label="事故提醒">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.remindDay}</Descriptions.Item>
            <Descriptions.Item label="备注说明">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.remark}</Descriptions.Item>
            <Descriptions.Item label="照片附件" span={4}>
            {
               detailsdata.pkgInfoDetailInfo.imgUrl&&detailsdata.pkgInfoDetailInfo.imgUrl!==null?
               <div style={{display: 'flex',
                   justifyContent: 'flex-start',
                   alignItems: 'center',
                   flexWrap: 'wrap'}}
                   >{
                  detailsdata.pkgInfoDetailInfo.imgUrl.split(',').map(function(item,index,arr){
                    let imgurl=`${API_URL}/api/uploadAndDownload/showImg?imgUrl=${item}`
                    // let imgurl='http://172.16.1.206:81/api/uploadAndDownload/showImg?imgUrl=' + item
                  //  return  <img src={imgurl} alt="" style={{display: 'block',width:'140px',height:'140px',margin:'5px'}}/>
                   return <div style={{display: 'block',width:'140px',height:'140px',margin:'5px'}}><Zmage src={imgurl} style={{display: 'block',width:'100%',height:'100%'}}/></div>
                   })
                 }</div>
                :'-'
            }
            </Descriptions.Item>
          </Descriptions>
          <Divider />
        </>
      ];
    }
    if (i ==='3') {
      return [
        <>
          <Descriptions title={<span >多收行李事故详情</span>} column={2}>
            <Descriptions.Item label="行李编号">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.pkgNo}</Descriptions.Item>
            {/* <Descriptions.Item label="事故类型">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.accidentType}</Descriptions.Item> */}
            <Descriptions.Item label="事故类型">多收行李</Descriptions.Item>
            <Descriptions.Item label="行李航线">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.pkgSegment}</Descriptions.Item>
            <Descriptions.Item label="行李类型">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.pkgType}</Descriptions.Item>
            <Descriptions.Item label="始发航站">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.pkgSegment&&detailsdata.pkgInfoDetailInfo.pkgSegment.split('-')[0]}</Descriptions.Item>
            <Descriptions.Item label="航班日期">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.pkgFlightDate}</Descriptions.Item>
            <Descriptions.Item label="行李航班">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.pkgFlightNo}</Descriptions.Item>
            <Descriptions.Item label="备注说明">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.remark}</Descriptions.Item>
            <Descriptions.Item label="照片附件" span={4}>
            {
               detailsdata.pkgInfoDetailInfo.imgUrl&&detailsdata.pkgInfoDetailInfo.imgUrl!==null?
               <div style={{display: 'flex',
                   justifyContent: 'flex-start',
                   alignItems: 'center',
                   flexWrap: 'wrap'}}
                   >{
                  detailsdata.pkgInfoDetailInfo.imgUrl.split(',').map(function(item,index,arr){
                    let imgurl=`${API_URL}/api/uploadAndDownload/showImg?imgUrl=${item}`
                    // let imgurl='http://172.16.1.206:81/api/uploadAndDownload/showImg?imgUrl=' + item
                  //  return  <img src={imgurl} alt="" style={{display: 'block',width:'140px',height:'140px',margin:'5px'}}/>
                   return <div style={{display: 'block',width:'140px',height:'140px',margin:'5px'}}><Zmage src={imgurl} style={{display: 'block',width:'100%',height:'100%'}}/></div>
                   })
                 }</div>
                :'-'
            }
            </Descriptions.Item>
          </Descriptions>
          <Divider />
        </>
      ]
    }
    if (i=== '4') {
      return [
        <>
          <Descriptions title={<span >内件缺失事故详情</span>} column={2}>
             <Descriptions.Item label="行李编号">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.pkgNo}</Descriptions.Item>
             {/* <Descriptions.Item label="事故类型">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.accidentType}</Descriptions.Item> */}
             <Descriptions.Item label="事故类型">内件缺失行李</Descriptions.Item>
             <Descriptions.Item label="行李航班">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.pkgFlightNo}</Descriptions.Item>
             <Descriptions.Item label="行李类型">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.pkgType}</Descriptions.Item>
            <Descriptions.Item label="航程及经停站">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.segment}</Descriptions.Item>
            <Descriptions.Item label="逾重行李票号">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.overWeightTktNo}</Descriptions.Item>
            <Descriptions.Item label="丢失重量">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.littlePkgWeight}</Descriptions.Item>
            <Descriptions.Item label="少收类型">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.littlePkgType}</Descriptions.Item>
            <Descriptions.Item label="事故提醒">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.remindDay}</Descriptions.Item>
            <Descriptions.Item label="备注说明">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.remark}</Descriptions.Item>
            <br></br>
            <br></br>
            <Descriptions.Item label="照片附件" span={4}>
            {
               detailsdata.pkgInfoDetailInfo.imgUrl&&detailsdata.pkgInfoDetailInfo.imgUrl!==null?
               <div style={{display: 'flex',
                   justifyContent: 'flex-start',
                   alignItems: 'center',
                   flexWrap: 'wrap'}}
                   >{
                  detailsdata.pkgInfoDetailInfo.imgUrl.split(',').map(function(item,index,arr){
                    let imgurl=`${API_URL}/api/uploadAndDownload/showImg?imgUrl=${item}`
                    // let imgurl='http://172.16.1.206:81/api/uploadAndDownload/showImg?imgUrl=' + item
                  //  return  <img src={imgurl} alt="" style={{display: 'block',width:'140px',height:'140px',margin:'5px'}}/>
                   return <div style={{display: 'block',width:'140px',height:'140px',margin:'5px'}}><Zmage src={imgurl} style={{display: 'block',width:'100%',height:'100%'}}/></div>
                   })
                 }</div>
                :'-'
            }
            </Descriptions.Item>
          </Descriptions>
          <Divider />
        </>
      ];
    }
  };

  const { data: detailsdata={pkgInfoDetailInfo:{},orderList:[]}, loading: detailLoading } = useRequest(
    () => queryDdetails({'accidentId':accidentId}),
    {
      refreshDeps: [accidentId],
      initialData:{}
    }
    )
    return(!detailLoading&&<Modal
      destroyOnClose
      title="旅客信息"
      visible={modalVisible}
      footer={null}
      style={{ top: 0, width: '100%', marginRight: 0, buttom: 0, paddingBottom: 0}}
      onCancel={() => onCancel()}
    >
      <Descriptions title={detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.paxName} column={1}>
        <Descriptions.Item label="客票号码">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.tktNo}</Descriptions.Item>
        <Descriptions.Item label="证件类型">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.idType === '1' ?'身份证' : '其他'}</Descriptions.Item>
        <Descriptions.Item label="证件号码">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.idNo}</Descriptions.Item>
        <Descriptions.Item label="联系电话">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.telephone}</Descriptions.Item>
        <Descriptions.Item label="旅客地址">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.postAddr}</Descriptions.Item>
        <Descriptions.Item label="航段">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.segment}</Descriptions.Item>
        <Descriptions.Item label="航班日期">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.flightDate}</Descriptions.Item>
        <Descriptions.Item label="原始航班">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.flightNo}</Descriptions.Item>
        <Descriptions.Item label="计划起飞时间">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.std}</Descriptions.Item>
        <Descriptions.Item label="舱位">{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.mainClass}</Descriptions.Item>
      </Descriptions>
      <Divider />
      {/* 行李破损展示开始 */}
      {/* <Descriptions title={<span >事故详情<Button>type	Sting	类型 0改签,1退票</Button></span>} column={2}>
        <Descriptions.Item label="行李编号">pkgNo</Descriptions.Item>
        <Descriptions.Item label="事故类型">accidentType</Descriptions.Item>
        <Descriptions.Item label="行李航线">pkgSegment</Descriptions.Item>
        <Descriptions.Item label="行李类型">pkgType</Descriptions.Item>
        <Descriptions.Item label="逾重行李票号">overWeightTktNo</Descriptions.Item>
        <Descriptions.Item label="破损类型">damageType</Descriptions.Item>
        <Descriptions.Item label="备注说明">remark</Descriptions.Item>
        <br></br>
        <Descriptions.Item label="照片附件" span={4}>
          <img
            width={100}
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          />
          <img
            width={100}
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          />
          <img
            width={100}
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          />
          <img
            width={100}
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          />
        </Descriptions.Item>
      </Descriptions>
      <Divider /> */}
      {/* 行李破损展示结束 */}
      {/* 多收行李展示开始 */}
      {/* <Descriptions title={<span >事故详情<Button>type	Sting	类型 0改签,1退票</Button></span>} column={2}>
        <Descriptions.Item label="行李编号">pkgNo</Descriptions.Item>
        <Descriptions.Item label="事故类型">accidentType</Descriptions.Item>
        <Descriptions.Item label="行李类型">pkgType</Descriptions.Item>
        <Descriptions.Item label="始发航站">无字段</Descriptions.Item>
        <Descriptions.Item label="航班日期">pkgFlightDate</Descriptions.Item>
        <Descriptions.Item label="行李航班">pkgFlightNo</Descriptions.Item>
        <Descriptions.Item label="备注说明">remark</Descriptions.Item>

        <br></br>
        <Descriptions.Item label="照片附件" span={4}>
          <img
            width={100}
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          />
          <img
            width={100}
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          />
          <img
            width={100}
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          />
          <img
            width={100}
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          />
        </Descriptions.Item>
      </Descriptions>
      <Divider /> */}
      {/* 多收行李展示结束 */}
      {/* 少收行李展示开始 */}
      {/* <Descriptions title={<span >事故详情<Button>type	Sting	类型 0改签,1退票</Button></span>} column={2}>
        <Descriptions.Item label="行李编号">pkgNo</Descriptions.Item>
        <Descriptions.Item label="事故类型">accidentType</Descriptions.Item>
        <Descriptions.Item label="行李航班">pkgFlightNo</Descriptions.Item>
        <Descriptions.Item label="行李类型">pkgType</Descriptions.Item>
        <Descriptions.Item label="航程及经停站">无字段</Descriptions.Item>
        <Descriptions.Item label="逾重行李票号">pkgFlightDate</Descriptions.Item>
        <Descriptions.Item label="丢失重量">littlePkgWeight</Descriptions.Item>
        <Descriptions.Item label="少收类型">littlePkgType</Descriptions.Item>
        <Descriptions.Item label="事故提醒">remindDay</Descriptions.Item>
        <Descriptions.Item label="备注说明">remark</Descriptions.Item>
        <Descriptions.Item label="照片附件" span={4}>
          <img
            width={100}
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          />
          <img
            width={100}
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          />
          <img
            width={100}
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          />
          <img
            width={100}
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          />
        </Descriptions.Item>
      </Descriptions>
      <Divider /> */}
      {/* 少收行李展示结束 */}
      {/* 动态展示详情开始 */}
      {renderContent(detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.accidentType)}
      {/* 动态展示详情结束 */}
      {/* 补偿信息展示orderInfoList */}
      <p style={{color: 'rgba(0, 0, 0, 0.85)',fontWeight: 'bold', fontSize: '16px'}}>补偿信息</p>
      {detailsdata.orderList&&detailsdata.orderList.map(i => (
          <div style={{backgroundColor:'rgb(250, 249, 249)',marginBottom:'10px',borderRadius:'3%',padding:'10px'}}>
            <Descriptions title={<span ></span>} column={1}>
               <Descriptions.Item label="补偿金额">
                {i.PAYMONEY !== null ? <span>{i.PAYMONEY}元</span> : null}
                </Descriptions.Item>
              <Descriptions.Item label="补偿单号">
                {/* {i.orderId} */}
                <div style={{width:'100%'}}>
                {i.ORDERID!==null?<div style={{cursor:'pointer',textDecoration:'underline',color:'#E13B3B',marginRight: '15px'}} onClick={() =>{
                    router.push({
                      pathname: '/compensation/indemnityForm',
                      state: {
                      type: 'examine',
                      orderId:i.ORDERID,
                      status: '4'
                      }
                      })
                  }}>{i.ORDERID}</div>:'-'}
                </div>
              </Descriptions.Item>
              <Descriptions.Item label="补偿状态">
               {i.STATUS === null ? null : null}
               {i.STATUS === '1' ? <span>待审核</span> : null}
               {i.STATUS === '2' ? <span >通过</span> : null}
               {i.STATUS === '3' ? <span>生效</span> : null}
               {i.STATUS === '4' ? <span>关闭</span> : null}
               {i.STATUS === '5' ? <span>未通过</span> : null}
              </Descriptions.Item>
              <Descriptions.Item label="领取状态">
               {i.RECEIVESTATUS === null ? null : null}
               {i.RECEIVESTATUS === '0' ? <span>未领取</span> : null}
               {i.RECEIVESTATUS === '1' ? <span>已领取</span> : null}
               {i.RECEIVESTATUS === '2' ? <span >处理中</span> : null}
               {i.RECEIVESTATUS === '3' ? <span>已逾期</span> : null}
              </Descriptions.Item>
              <Descriptions.Item label="发起人">
               {i.CREATEUSER === null ? null : null}
                {i.CREATEUSER? <span>{i.CREATEUSER}</span> : null}
              </Descriptions.Item>
           </Descriptions>
          </div>
        ))}
        <br/>
        <p>行李箱补偿：<span>{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.pkgSize!==null?<span>{
                 detailsdata.pkgInfoDetailInfo.pkgSize.split(',').map(function(item,index,arr){
                  return item+'寸'
                  })
                }&nbsp;&nbsp;</span>:'-'}</span></p>
        <p>个数：{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.pkgSize===null?<span>-</span>:detailsdata.pkgInfoDetailInfo.pkgSize.split(',').length}</p>
        <p>发起人：{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.applyUser}</p>
        <p>补偿总金额：{detailsdata.pkgInfoDetailInfo&&detailsdata.pkgInfoDetailInfo.payMoney}</p>
{/*
      <Descriptions title={<span >补偿信息：</span>} column={1}>
        <Descriptions.Item label="补偿总额">payMoney</Descriptions.Item>
        <Descriptions.Item label="补偿类型">accidentType</Descriptions.Item>
        <Descriptions.Item label="类目/金额">pkgSize</Descriptions.Item>
        <Descriptions.Item label="补偿单号">orderId</Descriptions.Item>
        <Descriptions.Item label="补偿状态">status</Descriptions.Item>
        <Descriptions.Item label="当前指示">无字段</Descriptions.Item>
      </Descriptions> */}
      {/* 补偿信息展示结束 */}

    </Modal>
  );
};

export default Form.create()(ListofDetails);
